import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js'
import gsap from 'gsap'
import * as dat from 'dat.gui'

var dir = false
// 场景
const scene = new THREE.Scene();
// 相机 （透视相机）  角度、宽高比、近端面、远端面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);

// 几何体与材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});
const cube = new THREE.Mesh(geometry, material);
// 设置位置
cube.position.set(0, 0, 0)
scene.add(cube);

// 渲染
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 新增动画
// const animation = gsap.to(cube.position, {
//     x: 5,
//     duration: 5,
//     ease: 'power1.inOut',
//     repeat: -1,
//     yoyo: true,
//     delay: 2,
//     onStart: () => {
//         alert("动画开始")
//     },
//     onComplete: () => {
//         alert("动画完成")
//     }
// })

// gsap.to(cube.rotation, {
//     x: 5 * Math.PI,
//     duration: 5,
//     ease: 'power1.inOut'
// })
// 新增轨迹控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 阻尼感   新增update()
controls.enableDamping = true

function render(time) {
    controls.update()
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render();

// window.addEventListener('click', () => {
//     if (animation.isActive()) {
//         animation.pause()
//     } else {
//         animation.resume()
//     }
// })

// window.addEventListener('resize', (e) => {
//     // 宽高比
//     camera.aspect = window.innerWidth / window.innerHeight;
//     camera.updateProjectionMatrix();
//     renderer.setSize(window.innerWidth, window.innerHeight);
//     renderer.setPixelRatio(window.devicePixelRatio);
// })

// window.addEventListener('dblclick', () => {
//     if (!document.fullscreenElement) {
//         renderer.domElement.requestFullscreen()
//     } else {
//         document.exitFullscreen()
//     }
// })

const GUI = new dat.GUI();
GUI.add(cube.position, 'x').min(0).max(10).step(0.01).name('移动x轴')
    .onChange((value) => {
        console.log('值被修改：', value)
    }).onFinishChange((value) => {
        console.log('完全停下来：', value)
    })

// 颜色选择器
GUI.addColor({
    color: '#000'
}, 'color').onChange((value) => {
    cube.material.color.set(value)
})

// 选择框
GUI.add(cube, 'visible').name('是否显示')

GUI.add({
    fn: function () {
        gsap.to(cube.position, {
            x: 5,
            duration: 5,
            ease: 'power1.inOut',
            repeat: -1,
            yoyo: true
        })
    }
}, 'fn').name('开启动画')

const folder = GUI.addFolder('文件夹')
folder.add(cube.position, 'x').min(0).max(10).step(0.01).name('移动x轴')
folder.add(cube.material,"wireframe").name('线框')